<style>
    /** 箭头未展开 */
    #menuTable + .treeTable .treeTable-icon .layui-icon-triangle-d:before {
        content: "\e602";
    }

    /** 箭头展开 */
    #menuTable + .treeTable .treeTable-icon.open .layui-icon-triangle-d:before {
        content: "\e61a";
    }

    /** 文件图标 */
    #menuTable + .treeTable .treeTable-icon .layui-icon-file:before {
        content: "\e621";
    }

    /** 文件夹未展开 */
    #menuTable + .treeTable .treeTable-icon .layui-icon-layer:before {
        content: "\e638";
    }

    /** 文件夹展开 */
    #menuTable + .treeTable .treeTable-icon.open .layui-icon-layer:before {
        content: "\e638";
    }
</style>

<title>菜单管理</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a><cite>系统管理</cite></a>
        <a><cite>菜单管理</cite></a>
    </div>
</div>

<!-- 页面加载loading -->
<div class="page-loading">
    <div class="rubik-loader"></div>
</div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <input id="edtSearch" class="layui-input" type="text" placeholder="输入关键字"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn icon-btn">搜索</button>
                        <button id="btnExpandAll" class="layui-btn icon-btn">展开</button>
                        <button id="btnFoldAll" class="layui-btn icon-btn">折叠</button>
                        <button id="btnAdd" class="layui-btn icon-btn">添加</button>
                    </div>
                </div>
            </div>

            <table class="layui-table" id="menuTable" lay-filter="menuTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    {{#  if(d.show == 1){ }}
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="show"><i class="layui-icon layui-icon-close"></i>隐藏</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show"><i class="layui-icon layui-icon-ok"></i>显示</a>
    {{#  } }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> <i
            class="layui-icon layui-icon-delete"></i>删除</a>
    <!--{{#  if(d.level == 0){ }}-->
    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="add"> <i-->
    <!--class="layui-icon layui-icon-add-1"></i>添加</a>-->
    <!--{{#  } }}-->
    <!--{{#  if(d.level != 0){ }}-->
    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
    <!--{{#  } }}-->
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="modelMenu">
    <form id="modelMenuForm" lay-filter="modelMenuForm" class="layui-form model-form">
        <div class="layui-form-item">
            <label class="layui-form-label">上级菜单</label>
            <div class="layui-input-block">
                <select name="pid" id="topMenu">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称(*)</label>
            <div class="layui-input-block">
                <input name="name" placeholder="请输入菜单名称" type="text" class="layui-input" maxlength="50"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示名称</label>
            <div class="layui-input-block">
                <input name="title" placeholder="请输入显示名称" type="text" class="layui-input" maxlength="50"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">跳转路径</label>
            <div class="layui-input-block">
                <input name="jump" placeholder="跳转路径" type="text" class="layui-input" lay-verType="tips"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单图标</label>
            <div class="layui-input-block">
                <input name="icon" placeholder="请输入菜单图标" type="text" class="layui-input" lay-verType="tips"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序号</label>
            <div class="layui-input-block">
                <input name="sort" placeholder="请输入排序号" type="number" class="layui-input" min="0" max="1000"
                       lay-verType="tips" lay-verify="number"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter="switch" name="show"
                       {{ (d.params.show===1) ? 'checked' : '' }}
                lay-skin="switch" lay-text="显示|隐藏">
            </div>
        </div>


        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-fluid" lay-filter="modelMenuSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>

<script>
    layui.use(['layer', 'form', 'table', 'admin', 'treetable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var treetable = layui.treetable;
        var setter = layui.setter;

        var apiUrl = setter.apiUrl;

        // 渲染表格
        function renderTable() {
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'pid',

                contentType: 'application/json',
                headers: {'token': layui.data(setter.tableName).token},


                elem: '#menuTable',
                url: apiUrl + '/mapi/menu/list',
                cellMinWidth: 100,

                cols: [[
                    {type: 'numbers'},
                    {field: 'title', title: '菜单名称', minWidth: 200},
                    {field: 'jump', title: '菜单url'},
                    {
                        field: 'icon',
                        width: 100,
                        title: '菜单图标',
                        templet: '<div><i class="layui-icon {{d.icon}}"></i></div>', align: 'center'
                    },
                    {
                        field: 'sort',
                        width: 100,
                        title: '排序',
                        align: 'center'
                    },
                    {
                        field: 'show',
                        width: 100,
                        title: '当前状态',
                        templet: '<div>{{d.show==1?"显示":"隐藏"}}</div>',
                        align: 'center'
                    },
                    {templet: '#tableBar', title: '操作', minWidth: 120}
                ]]
            });

            //折叠
            treetable.foldAll('#menuTable');
        }

        renderTable();

        // 添加按钮点击事件
        $('#btnAdd').click(function () {
            showEditModel();
        });
        $('#btnFoldAll').click(function () {
            treetable.foldAll('#menuTable');
        });
        $('#btnExpandAll').click(function () {
            treetable.expandAll('#menuTable');
        });

        // 工具条点击事件
        table.on('tool(menuTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'show') { // 添加
                changeShow(data);
            } else if (layEvent === 'del') { // 添加
                top.layer.confirm('确定要删除' + '“' + data.title + '”吗？', {
                        skin: 'layui-layer-admin'
                    }, function (index) {
                        top.layer.close(index);
                        admin.req({
                            url: apiUrl + '/mapi/menu/delete/' + data.id
                            , method: 'delete'
                            , done: function (response) {
                                if (response.code === 0) {
                                    layer.msg('删除成功', {
                                        offset: '15px', icon: 1, time: 1000
                                    }, function () {
                                        renderTable();
                                    });
                                } else {
                                    layer.msg(response.msg, {
                                        offset: '15px', icon: 2
                                    });
                                }
                            }
                        });
                    }
                );
            }
        });

        // 删除
        function changeShow(data) {
            var title = data.title;
            var id = data.id;
            var show = data.show === 1 ? '隐藏' : '显示';
            var showValue = data.show === 1 ? 0 : 1;
            top.layer.confirm('确定要' + show + '“' + title + '”吗？', {
                    skin: 'layui-layer-admin'
                }, function (index) {
                    top.layer.close(index);
                    admin.req({
                        url: apiUrl + '/mapi/menu/update/' + id
                        , method: 'put'
                        , data: JSON.stringify({show: showValue})
                        , done: function (response) {
                            if (response.code === 0) {
                                layer.msg(show + '成功', {
                                    offset: '15px', icon: 1, time: 1000
                                }, function () {
                                    renderTable();
                                });
                            } else {
                                layer.msg(response.msg, {
                                    offset: '15px', icon: 2
                                });
                            }
                        }
                    });
                }
            );
        }

        // 显示表单弹窗
        function showEditModel(menu) {
            // console.log(menu);
            admin.popup({
                title: (menu ? '修改' : '添加') + '菜单'
                , area: ['450px', '520px']
                , id: 'LAY-popup-menu-add'
                , content: $('#modelMenu').html()
                , success: function (layero, index) {

                    admin.req({
                        url: apiUrl + '/mapi/menu/list/top'
                        , method: 'get'
                        , done: function (response) {
                            if (response.code === 0) {
                                var list = response.data;
                                var html = "";
                                for (var i = 0; i < list.length; i++) {
                                    html += "<option value=" + list[i]["id"] + ">" + list[i]["title"] + "</option>";
                                }
                                $("#topMenu").append(html);
                                var pid = menu ? menu.pid : 0;
                                $("#topMenu").val(pid);
                                if (menu && menu.pid === 0) {
                                    $('select').attr('disabled', 'disabled');
                                }
                                form.render('select');
                            }
                        }
                    });

                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    var url = menu ? apiUrl + '/mapi/menu/update/' + menu.id : apiUrl + '/mapi/menu/add';
                    var method = menu ? 'put' : 'post';
                    // if (menu && menu.isMenu == '1') {
                    //     $('input[name="isMenu"][value="1"]').prop("checked", true);
                    // }
                    form.val('modelMenuForm', menu);  // 回显数据
                    // 表单提交事件
                    form.on('submit(modelMenuSubmit)', function (data) {
                        if (data.field.pid == '') {
                            data.field.pid = '0';
                        }
                        if (data.field.show == 'on') {
                            data.field.show = 1;
                        } else {
                            data.field.show = 0;
                        }
                        //提交 Ajax 成功后，关闭当前弹层并重载表格
                        admin.req({
                            url: url
                            , method: method
                            , data: JSON.stringify(data.field)
                            , done: function (response) {
                                if (response.code === 0) {
                                    layer.msg('保存成功', {
                                        offset: '15px', icon: 1, time: 1000
                                    }, function () {
                                        layer.close(index); //执行关闭
                                        renderTable();
                                    });
                                } else {
                                    layer.msg(response.msg, {
                                        offset: '15px', icon: 2
                                    });
                                }
                            }
                        });
                        return false;
                    });
                }
            });
        }

        // 搜索按钮点击事件
        $('#btnSearch').click(function () {
            $('#edtSearch').removeClass('layui-form-danger');
            var keyword = $('#edtSearch').val();
            var $tds = $('#menuTable').next('.treeTable').find('.layui-table-body tbody tr td');
            $tds.css('background-color', 'transparent');
            if (!keyword) {
                layer.msg("请输入关键字", {icon: 5, anim: 6});
                $('#edtSearch').addClass('layui-form-danger');
                $('#edtSearch').focus();
                return;
            }
            var searchCount = 0;
            $tds.each(function () {
                if ($(this).text().indexOf(keyword) >= 0) {
                    $(this).css('background-color', '#FAE6A0');
                    if (searchCount == 0) {
                        $('body,html').stop(true);
                        $('body,html').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (searchCount == 0) {
                layer.msg("没有匹配结果", {icon: 5, anim: 6});
            } else {
                treetable.expandAll('#menuTable');
            }
        });

    });
</script>

